/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight:normal;
}
/* Font */
$font_size: 16px;
$font_family: vernada,sans-serif;

/* Theme color */
$color_soft : #ff0051;
$color_soft_dark: #cd0021;
$color_main: #e6e6e6;
$color_main_light: #ffffff;
$color_hline: #808080;
$color_button_text: #6d6d6d;
$color_button_text_hover: #000000;
$color_button_border: #b3b3b3;
$color_button_border_hover: #666666;
$color_dark: #000000;
/* Size */
$menu_panel_height: 40px;
$menu_text_icon_size: 30px;

/* Definition */
@mixin opacity ($percent: 50) {
	opacity: 0.01*$percent;
	filter: "Alpha(Opacity:",$percent,")";
}
@mixin shadow_box ($x: 0px,$y: 0px,$s_size: 10px,$s_color: #000000) {
	-moz-box-shadow: $x $y $s_size $s_color;
	-webkit-box-shadow: $x $y $s_size $s_color;
	box-shadow: $x $y $s_size $s_color;
}
@mixin transition($type: all){
    -webkit-transition: $type 0.25s ease-in-out;
    -moz-transition: $type 0.25s ease-in-out;
		transition: $type 0.25s ease-in-out;
}
@mixin rounded_right_corners ($radius: 5px) {
	-moz-border-radius-topright:$radius;
	-moz-border-radius-bottomright:$radius;
	-webkit-border-top-right-radius:$radius;
	-webkit-border-bottom-right-radius:$radius;
	border-top-right-radius:$radius;
	border-bottom-right-radius:$radius;
}
@mixin rounded_left_corners ($radius: 5px) {
	-moz-border-radius-topleft:$radius;
	-moz-border-radius-bottomleft:$radius;
	-webkit-border-top-left-radius:$radius;
	-webkit-border-bottom-left-radius:$radius;
	border-top-left-radius:$radius;
	border-bottom-left-radius:$radius;
}
@mixin rounded_corners ($radius: 5px) {
	-moz-border-radius:$radius;
	-webkit-border-radius:$radius;	
	border-radius:$radius;
}
@mixin mac_text_shadow{text-shadow:1px 1px 0 rgba(255,255,255,0.8);}
@mixin gradient($from: #ffffff,$to: #000000){
	background: $from;
	background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
	background: -moz-linear-gradient(top, $from,  $to);
	filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='",$from,"', endColorstr='",$to,"')";
}
@mixin bgclip($type: padding){
	-webkit-background-clip: $type;
	-moz-background-clip:$type;
	background-clip: #{$type}-box;
}
.hide{display:none;}
#jerboa {
	width: 400px;
	max-width: 400px;
	display: none;
}
#jb-a {
	width: 600px;
	position: relative;
	border:1px solid #bebebe;
	margin-top: 10px;
	margin-bottom: 10px;
}
#jb-b {
	width: 100%;
	height: $menu_panel_height;
	border-top: 1px solid white;
	border-bottom: 1px solid #bebebe;
	background: #dedede;
	color: #666;
	font-size: 14px;
	cursor: default;
}
#jb-b,#jb-box {
	font-family: $font_family;
	text-shadow: 0 1px 1px #fff;
}
#jb-stage {
	backgrond: white;
	padding:0;
	margin:0;
}
#jb-box {
	width: 400px;
	background:#f6f6f6;
	color: #666;
	border: 10px solid rgba(0,0,0,0.4);
	padding: 20px;
	border-radius:10px;
	position: fixed;
	text-align: left;
	top:30px;
	left:340px;
	z-index: 9999;
	@include bgclip;
}
#jb-box input,#jb-box label,#jb-box textarea,#jb-box .jb-button,.hline {margin-bottom:10px;}
#jb-box label {width:100%;float:left;font-size:$font_size;}
#jb-box label span {font-size: 0.7*$font_size;text-shadow:none;margin-left:10px;color: $color_hline;}
#jb-box input,#jb-box textarea {display:inline-block;border:1px solid $color_dark;outline:none;width: 378px;padding:10px;font-family:$font_family;font-size:$font_size;}
#jb-box input:focus, #jb-box textarea:focus {@include shadow_box(0,0,5px,$color_soft);border:1px solid $color_soft;}
#jb-box b {font-weight:normal;color:$color_soft;}
#jb-box textarea {min-height:80px;height:80px;}
#jb-b>div {
	z-index: 3001;
	button{
		height:$menu_text_icon_size;float:left;
		cursor:pointer;padding:0;margin:0;
		border:1px solid #999;border-left:0;
	}
	>div {
		margin-top:($menu_panel_height - $menu_text_icon_size)/2;
		margin-left:5px;
		>button:first-child {border-left:1px solid #999;@include rounded_left_corners;}
		>button:last-child {@include rounded_right_corners;}
	}
	button>span{
		display:inline-block;
		margin:0;line-height:$menu_text_icon_size - 2;
		height:$menu_text_icon_size;
	}
}
#jb-mainmenu {
	button>span {padding-left:30px;padding-right:10px;}
}
#jb-textmenu {
	button {width:$menu_text_icon_size;}
	button>span {width:$menu_text_icon_size;}
}
.last {
	margin-bottom: 20px !important;
}
.bottom {
	margin-bottom: 0;
}
.left {
	clear:both;
	float:left;
}
.right {
	clear:both;
	float:right;
}
.hline {
	clear:both;
	border-top:1px solid $color_button_border;
	width:100%;
}
.bigger {
	font-size: (1.86*$font_size) !important;
	padding: 10px 0;
}
.jb-button {
	@include rounded_corners(20px);
	display: inline-block;
	color: #6d6d6d;
	border: 1px solid #b3b3b3;
	padding: 8px 15px;
	cursor: pointer;
}
div.jb-button:hover {
	color: #000;
	border-color: #666;
}
.jb-hline {
	height:10px;
	width: 100%;
	background: #dedede;
	cursor: s-resize;
}
.jb-button,#jb-b>div button,.jb-selectbox {
	@include gradient($color_main_light,$color_main);
}
div.jb-button:active, #jb-b>div button:active, div.jb-selectbox:active {
	@include gradient($color_main,$color_main_light);
}
.jb-flipswitch>div>div {
	background: #ff0051;
}
.jb-flipswitch {display: inline-block;}
.jb-flipswitch select {display:none;}
.jb-flipswitch label {line-height:30px;width:250px !important;}
.jb-flipswitch>div {width:148px;height:30px;float:right;padding:0px;}
.jb-flipswitch>div>div {border-radius: 15px;text-shadow: none;width:60%;text-align:center;padding:8px 0;float:left;color: #ffffff;}
.jb-flipswitch>div>div+div {float:right;}
.jb-selectbox {
		@include rounded_corners(4px);
		border:1px solid #999;float:left;
		position: relative;font-size:$font_size*0.9;
		display:inline-block;
		cursor:pointer;
		div {
			position:absolute;width:100%;z-index:2001;
			border:1px solid #ccc;
			background:$color_main;
			span {
				width:100%;display:block;
				padding:5px 0;margin:0;
				text-align:center;
			}
			span:hover {
				background: $color_soft;
				color: #fff;
				text-shadow: none;
			}
		}
		>span {
			line-height: $menu_text_icon_size - 2;
			display: inline-block;
			background: url(../img/selectbox.png?embed=true) right center no-repeat;
			padding-left: 5px;padding-right: 25px;margin-left:1px;
		}
}
.jb-layer {
	position:absolute;top:0;left:0;width:100%;height:100%;
	>div{padding:0;margin:0;display:inline-block;float:left;overflow:hidden;cursor:pointer;
	}
}
.jb-touch {border: 1px dashed #000 !important;cursor:default !important;}
.jb-media-touch {position:absolute;width:100%;height:100%;background-color:white;@include opacity(0);}
